<template>
  <div :class="['modul-activity', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="activity-list">
      <div class="content" v-for="(item, index) in activityList" :key="index" @click="goDesc(item.data_id)">
        <el-image fit="cover" class="image" :src="item.title_page" alt="">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div class="activity-title">
          {{ item.name }}
        </div>
        <div class="time-box">
          <span class="time">
            {{ item.start_time.replace('00:00:00', '') }} - {{ item.end_time.replace('00:00:00', '') }}
          </span>
          <span class="look">
            <img src="@/static/img/editPersonalHome/zhenyan.png" alt="">
            {{ item.read_count }}
          </span>
        </div>
      </div>
    </div>
    <div class="look-more" @click="lookMore" v-if="activityTotal > activityList.length">
      查看更多
    </div>
    <Pagin
      ref="page"
      v-show="activityList.length !== 0 && $ua.isFromPc()"
      :func="getDataList"
      :pagesSizes="[10, 20, 30, 50]"
      :sizeNum="10"
      :layout="'prev, pager, next'"
      background
      :position="'center'"
      class="pagin"
    ></Pagin>
  </div>
</template>

<script>
import {getImgUrl} from '@/utils/downloadFile'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      activityList: [],
      activityTotal: -1,
      page_num: 1,
      page_count: 2
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    if (this.$ua.isFromPc()) {
      this.refresh() 
    } else {
      this.getActivityList()
    }
  },
  methods: {
    getImgUrl,
    refresh() {
      this.$refs.page.refresh()
    },
    getDataList(page, page_size, callback) {
      // 这里要写接口然后把数据和total丢进去
      let params = {
        page_num: page,
        page_count: page_size
        // art_id: this.$store.state.user.info?.user_info?.data_id || ''
      }
      // 获取专题活动列表
      this.$api.getActivity(params).then(res => {
        if (res.status == '$SUCCESS') {
          console.log('res.result.item_list', res.result.item_list)
          this.activityList = Array.isArray(res.result.item_list) ? res.result.item_list : []
          callback(this.activityList, res.result.total_count)
        }
      })
    },
    getActivityList() {
      const params = {
        page_num: this.page_num,
        page_count: this.page_count
      }
      this.$api.getActivity(params).then(res => {
        let activityList = Array.isArray(res.result.item_list) ? res.result.item_list : []
        this.activityTotal = res.result.total_count
        activityList.forEach(item => {
          this.activityList.push(item)
        })
      })
    },
    lookMore() {
      this.page_num++
      this.getActivityList()
    },
    goDesc(data_id) {
      this.$router.push({ path: '/dynamic/activityDesc', query: { data_id }})
    }
  }
}
</script>

<style scoped lang="less">
.modul-activity {
  &.z-web {
    .activity-list {
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      flex-wrap: wrap;
      text-align: left;
      margin-bottom: 20px;

      .content {
        width: 656px;
        margin-bottom: 40px;
        cursor: pointer;

        .image {
          width: 100%;
          height: 369px;
        }

        .activity-title {
          line-height: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #000;
          margin: 12px 0;
        }

        .time-box {
          font-size: 16px;
          font-weight: bold;
          color: #999;
          // line-height: 13px;

          .look {
            font-weight: 600;
            float: right;

            img {
              vertical-align: sub;
            }
          }
        }
      }
    }
  }

  &.z-phone {
    .activity-list {
      text-align: left;

      .content {
        margin-bottom: pxtorem(60);

        ::v-deep(.el-image) {
          width: 100%;
          height: pxtorem(395);
          margin-bottom: pxtorem(34);
        }

        .activity-title {
          font-size: pxtorem(28);
          font-weight: 600;
          color: #000;
          margin-bottom: pxtorem(16);
        }

        .time-box {
          font-size: pxtorem(24);
          font-weight: bold;
          color: #999;
          .look {
            float: right;
          }
        }
      }
    }
  }
}
</style>
